<template>
	<view class="page">
		<view class="bg-w pd30 mb20">
			<view class="flex space alcenter">
				<view class="ft16 ftw600 text-main">我的商品</view>
				<view class="flex alcenter">
					<view class="tab-item" :class="{'active': statusIndex === 0}" @click="changeStatus(0)">
						全部
					</view>
					<view class="tab-item" :class="{'active': statusIndex === 1}" @click="changeStatus(1)">
						在售
					</view>
					<view class="tab-item" :class="{'active': statusIndex === 2}" @click="changeStatus(2)">
						下架
					</view>
				</view>
			</view>
		</view>
		
		<view class="goods-list">
			<view v-for="(item, index) in goodsList" :key="index" class="goods-item bg-w mb20">
				<view class="goods-header">
					<view class="goods-status" :class="{'status-off': item.status === 0, 'status-on': item.status === 1}">
						{{item.status === 1 ? '在售' : '下架'}}
					</view>
					<view class="goods-date">{{item.create_time}}</view>
				</view>
				
				<view class="goods-content" @click="viewGoods(item.id)">
					<image :src="item.image" mode="aspectFill" class="goods-image"></image>
					<view class="goods-info">
						<view class="goods-title">{{item.title}}</view>
						<view class="goods-category">{{item.category_name}}</view>
						<view class="goods-price">¥{{item.price}}</view>
						<view v-if="item.enable_distribution" class="goods-commission">
							<text class="label">佣金：</text>
							<text class="value">{{item.commission_rate}}%</text>
						</view>
					</view>
				</view>
				
				<view class="goods-stats">
					<view class="stat-item">
						<text class="value">{{item.views || 0}}</text>
						<text class="label">浏览</text>
					</view>
					<view class="stat-item">
						<text class="value">{{item.sales || 0}}</text>
						<text class="label">销量</text>
					</view>
					<view class="stat-item">
						<text class="value">{{item.distributors || 0}}</text>
						<text class="label">分销商</text>
					</view>
					<view class="stat-item">
						<text class="value">¥{{item.commission_total || 0}}</text>
						<text class="label">总佣金</text>
					</view>
				</view>
				
				<view class="goods-actions">
					<button class="action-btn edit-btn" @click="editGoods(item)">编辑</button>
					<button class="action-btn" :class="item.status === 1 ? 'off-btn' : 'on-btn'" @click="toggleStatus(item)">
						{{item.status === 1 ? '下架' : '上架'}}
					</button>
					<button class="action-btn delete-btn" @click="deleteGoods(item)">删除</button>
				</view>
			</view>
		</view>
		
		<view v-if="goodsList.length === 0" class="empty-page">
			<app-icon :name="'https://picsum.photos/200/200'" type="image" custom-class="empty-image" />
			<view class="empty-text">暂无商品</view>
			<button class="btn-main" @click="goPublish">去发布商品</button>
		</view>
		
		<view class="fab-button" @click="goPublish">
			<text class="iconfont">+</text>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';

export default {
	data() {
		return {
			statusIndex: 0,
			goodsList: [
				{
					id: 1,
					title: '美味汉堡套餐',
					category_name: '美食餐饮',
					price: 29.9,
					commission_rate: 20,
					image: 'https://picsum.photos/seed/goods1/200/200.jpg',
					status: 1,
					enable_distribution: true,
					create_time: '2024-01-15 10:30',
					views: 128,
					sales: 45,
					distributors: 12,
					commission_total: 269.10
				},
				{
					id: 2,
					title: '专业理发服务',
					category_name: '美容美发',
					price: 58,
					commission_rate: 15,
					image: 'https://picsum.photos/seed/goods2/200/200.jpg',
					status: 1,
					enable_distribution: true,
					create_time: '2024-01-12 14:20',
					views: 89,
					sales: 23,
					distributors: 8,
					commission_total: 200.70
				},
				{
					id: 3,
					title: '健身月卡',
					category_name: '健身运动',
					price: 199,
					commission_rate: 10,
					image: 'https://picsum.photos/seed/goods3/200/200.jpg',
					status: 0,
					enable_distribution: true,
					create_time: '2024-01-08 09:15',
					views: 56,
					sales: 8,
					distributors: 3,
					commission_total: 159.20
				}
			]
		};
	},
	computed: {
		...mapState(['memberInfo']),
		isLogin() {
			return this.memberInfo == null ? false : true;
		}
	},
	onLoad() {
		this.loadGoodsList();
	},
	methods: {
		loadGoodsList() {
			// 根据statusIndex过滤商品
			// 实际项目中这里会调用API
		},
		
		changeStatus(index) {
			this.statusIndex = index;
			this.loadGoodsList();
		},
		
		viewGoods(id) {
			uni.navigateTo({
				url: `/pages/goods/detail?id=${id}`
			});
		},
		
		editGoods(item) {
			uni.navigateTo({
				url: `/pages/goods/publish?id=${item.id}`
			});
		},
		
		toggleStatus(item) {
			const action = item.status === 1 ? '下架' : '上架';
			uni.showModal({
				title: `确认${action}`,
				content: `确定要${action}这个商品吗？`,
				success: (res) => {
					if (res.confirm) {
						uni.showLoading({ title: `${action}中...` });
						setTimeout(() => {
							uni.hideLoading();
							item.status = item.status === 1 ? 0 : 1;
							uni.showToast({ 
								title: `${action}成功`, 
								icon: 'success' 
							});
						}, 1000);
					}
				}
			});
		},
		
		deleteGoods(item) {
			uni.showModal({
				title: '确认删除',
				content: '确定要删除这个商品吗？删除后不可恢复',
				confirmColor: '#ff4757',
				success: (res) => {
					if (res.confirm) {
						uni.showLoading({ title: '删除中...' });
						setTimeout(() => {
							uni.hideLoading();
							const index = this.goodsList.findIndex(g => g.id === item.id);
							if (index > -1) {
								this.goodsList.splice(index, 1);
							}
							uni.showToast({ 
								title: '删除成功', 
								icon: 'success' 
							});
						}, 1000);
					}
				}
			});
		},
		
		goPublish() {
			uni.navigateTo({
				url: '/pages/goods/publish'
			});
		}
	}
};
</script>

<style>
.tab-item {
	padding: 10rpx 20rpx;
	margin-right: 20rpx;
	border-radius: 20rpx;
	font-size: 24rpx;
	color: #666;
	background: #f5f5f5;
}

.tab-item.active {
	background: #007aff;
	color: white;
}

.goods-item {
	padding: 30rpx;
	border-radius: 12rpx;
}

.goods-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.goods-status {
	padding: 6rpx 16rpx;
	border-radius: 12rpx;
	font-size: 24rpx;
	color: white;
}

.goods-status.status-on {
	background: #2ed573;
}

.goods-status.status-off {
	background: #ff6b6b;
}

.goods-date {
	font-size: 24rpx;
	color: #999;
}

.goods-content {
	display: flex;
	margin-bottom: 20rpx;
}

.goods-image {
	width: 160rpx;
	height: 160rpx;
	border-radius: 8rpx;
	margin-right: 20rpx;
	flex-shrink: 0;
}

.goods-info {
	flex: 1;
}

.goods-title {
	font-size: 28rpx;
	color: #333;
	font-weight: 600;
	margin-bottom: 10rpx;
}

.goods-category {
	font-size: 24rpx;
	color: #999;
	margin-bottom: 10rpx;
}

.goods-price {
	font-size: 32rpx;
	color: #ff4757;
	font-weight: 600;
	margin-bottom: 10rpx;
}

.goods-commission {
	font-size: 24rpx;
	color: #ff6348;
}

.goods-stats {
	display: flex;
	justify-content: space-around;
	padding: 20rpx 0;
	border-top: 1rpx solid #f5f5f5;
	border-bottom: 1rpx solid #f5f5f5;
	margin-bottom: 20rpx;
}

.stat-item {
	text-align: center;
}

.stat-item .value {
	display: block;
	font-size: 28rpx;
	color: #333;
	font-weight: 600;
	margin-bottom: 6rpx;
}

.stat-item .label {
	font-size: 24rpx;
	color: #999;
}

.goods-actions {
	display: flex;
	gap: 20rpx;
}

.action-btn {
	flex: 1;
	height: 60rpx;
	line-height: 60rpx;
	font-size: 26rpx;
	border-radius: 8rpx;
	border: none;
}

.edit-btn {
	background: #f0f0f0;
	color: #333;
}

.on-btn {
	background: #2ed573;
	color: white;
}

.off-btn {
	background: #ff6b6b;
	color: white;
}

.delete-btn {
	background: #ff4757;
	color: white;
}

.empty-page {
	padding: 100rpx 40rpx;
	text-align: center;
}

.empty-image {
	width: 200rpx;
	height: 200rpx;
	margin-bottom: 30rpx;
}

.empty-text {
	font-size: 28rpx;
	color: #999;
	margin-bottom: 40rpx;
}

.fab-button {
	position: fixed;
	right: 40rpx;
	bottom: 100rpx;
	width: 120rpx;
	height: 120rpx;
	background: #007aff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 60rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.3);
}
</style>